CSS box-sizing属性

box-sizing属性决定元素的总宽高如何计算，是理解盒模型的关键。

语法

CSS

.box {
  box-sizing: content-box | border-box;
}

content-box（默认值）

宽高只包含内容区域，padding 和 border 额外增加：

CSS

.box {
  box-sizing: content-box;
  width: 200px;
  padding: 20px;
  border: 5px solid #333;
}

/* 实际宽度 = 200 + 20*2 + 5*2 = 250px */

border-box

宽高包含 padding 和 border：

CSS

.box {
  box-sizing: border-box;
  width: 200px;
  padding: 20px;
  border: 5px solid #333;
}

/* 实际宽度 = 200px（固定不变） */
/* 内容区域 = 200 - 20*2 - 5*2 = 150px */

对比

特性	content-box	border-box
宽高计算	只含内容	含 padding 和 border
实际尺寸	大于设定值	等于设定值
布局计算	复杂	直观
兼容性	默认值	推荐使用

全局设置

推荐全局使用 border-box：

CSS

*,
*::before,
*::after {
  box-sizing: border-box;
}

注意：使用 border-box 可避免宽高计算混乱，是现代布局的标准做法。

要点总结

content-box 宽高仅指内容区域
border-box 宽高包含 padding 和 border
推荐全局设置 border-box 简化布局计算
box-sizing 不影响 margin 的计算

存放路径：articles/CSS/入门/CSS盒模型/CSS box-sizing属性.md